<template>
  <div class="cain-dashboard">
    <div class="cain-dashboard-left">
      <div class="cain-dashboard-left-tool-card">
        <dsshboard />
        <dsshboard />
        <dsshboard />
        <dsshboard />
      </div>
      <div class="cain-dashboard-left-card">
        <a-card title="动态">
          <a-list
            class="demo-loadmore-list"
            item-layout="horizontal"
            :data-source="dataList"
          >
            <template #renderItem="{ item }">
              <a-list-item>
                <template #actions>
                  <a>edit</a>
                  <a>more</a>
                </template>
                <a-list-item-meta
                  description="Ant Design, a design language for background applications, is refined by Ant UED Team"
                >
                  <template #title>
                    <a href="https://www.antdv.com/">asdsasdsad</a>
                  </template>
                  <template #avatar>
                    <a-avatar
                      src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                    />
                  </template>
                </a-list-item-meta>
                <div>content</div>
              </a-list-item>
            </template>
          </a-list>
        </a-card>
      </div>
    </div>
    <div class="cain-dashboard-right">
      <div>
        <a-card title="动态">
          <nchart />
          <div class="cain-dashboard-right-card">
            <datacardVue></datacardVue>
            <datacardVue></datacardVue>
            <datacardVue></datacardVue>
            <datacardVue></datacardVue>
          </div>
        </a-card>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import dsshboard from "../../components/dashboard/dsshboard.vue";
import nchart from "../../components/echarts/ncharts.vue";
import datacardVue from "../../components/dashboard/datacard.vue";
const dataList = [
  {
    name: "asdas",
  },
  {
    name: "asdas",
  },
  {
    name: "asdas",
  },
  {
    name: "asdas",
  },
  {
    name: "asdas",
  },
  {
    name: "asdas",
  },
];
</script>

<style lang="scss">
.cain-dashboard {
  width: 100%;
  display: flex;
  gap: 20px;
  height: 790px;
  overflow: hidden;
  overflow-y: auto;
  @media screen and (max-width: 1530px) {
    flex-direction: column;
    padding: 0px 10px;
    .cain-dashboard-left-tool-card {
      padding-left: 0px !important;
    }
    .cain-dashboard-left-card {
      padding-left: 0px !important;
    }
    .cain-dashboard-right {
      padding-right: 0px !important;
    }
  }

  @media screen and (max-width: 1350px) {
    .cain-dashboard-left-tool-card {
      flex-wrap: wrap;
      justify-content: center;
    }
  }
  .cain-dashboard-left {
    flex: 0 0 73%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    .cain-dashboard-left-tool-card {
      overflow: hidden;
      width: 100%;
      display: flex;
      box-sizing: border-box;
      padding-left: 10px;
      gap: 20px;
    }
    .cain-dashboard-left-card {
      padding-left: 10px;
    }
  }
  .cain-dashboard-right {
    flex: 1;
    padding-right: 10px;
    box-sizing: border-box;
    .cain-dashboard-right-card {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
  }
}
</style>
